<template>
    <div class="recipe">
      <van-grid :gutter="10" :column-num="2" :border="false" clickable >
        <van-grid-item v-for="recipe in recipes" :key="recipe.id">
          <recipe-item :recipe="recipe"  />
        </van-grid-item>
      </van-grid>

    </div>
</template>

<script>
import RecipeItem from '../components/RecipeItem.vue'
import { IMAGE_PREFIX } from '../config'
export default {
  components: {
    'recipe-item': RecipeItem
  },
  data () {
    return {
      // 食谱列表
      recipes: []
    }
  },
  methods: {
    /**
     * 业务： 获取食谱数据
     */
    getRecipes () {
      this.$http.get('/menus/all_menu')
        .then(({ data: res }) => {
          const { meta, data } = res
          if (meta.code !== 200) {
            return this.$notify(meta.msg)
          }
          this.recipeParser(data)
        }).catch(error => {
          this.$$notify(error)
        })
    },
    // 食谱页面数据解析器
    recipeParser (rowData) {
      const recipes = []
      rowData.filter(item => {
        const { id, name, image: imageStr } = item
        const thumbnail = IMAGE_PREFIX + imageStr.split(';')[0]
        const recipe = {
          id: id,
          title: name,
          thumbnail: thumbnail
        }
        recipes.push(recipe)
      })
      this.recipes = recipes
    }
  },
  created () {
    this.getRecipes()
  }
}
</script>

<style lang="less">
.van-grid-item__content{
  padding: 5px !important;
}
</style>
